<template>
  <div class="app-container">
    <div class="app-content">
      <div>
        <p class="info">报修信息</p>
        <el-descriptions>
          <el-descriptions-item label="维修项目">{{ form.equipmentName }}</el-descriptions-item>
          <el-descriptions-item label="工单状态">
            <div style="display: flex; align-items: center;">
              <span class="wait-round " v-if="form.reStatus === 0"></span>
              <span class="time-out-round " v-if="form.reStatus === 1"></span>
              <span class="delay-round " v-if="[5, 6, 7].includes(form.reStatus)"></span>
              <span>{{ changeReStatus(form.reStatus) }}</span>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="截止时间">{{ form.endDate }}</el-descriptions-item>
          <el-descriptions-item label="定位">{{ form.position }}</el-descriptions-item>
          <el-descriptions-item label="报修联系人">{{ form.repairUser }}</el-descriptions-item>
          <el-descriptions-item label="报修联系方式">{{ form.repairPhone }}</el-descriptions-item>
          <el-descriptions-item label="维修员">{{ form.repairPerson }}</el-descriptions-item>
          <el-descriptions-item label="维修员电话">{{ form.repairPersonPhone }}</el-descriptions-item>
          <el-descriptions-item label="报修内容" span="3">{{ form.remark }}</el-descriptions-item>
          <el-descriptions-item label="图片" span="3">
            <template>
              <img :src="item" alt="" class="son-img" v-for="(item, index) in form.imgList" :key="index" />
            </template>
          </el-descriptions-item>
          <el-descriptions-item label="视频" span="3">
            <template>
              <video :src="item" class="son-img" controls="controls" v-for="(item, index) in form.fileList" :key="index"></video>
              <!-- <img :src="item" alt="" class="son-img" v-for="(item, index) in form.imgList" :key="index" /> -->
            </template>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- 延期 -->
      <div class="info-content" v-if="form.status3 || form.status3 === 0">
        <el-divider></el-divider>
        <p class="info">延期信息</p>
        <el-descriptions>
          <el-descriptions-item label="延期原因">{{ form.delayRemark }}</el-descriptions-item>
          <el-descriptions-item label="延期截止时间" span="2">{{ form.delayEndDate }}</el-descriptions-item>
          <el-descriptions-item label="延期图片" span="3">
            <img :src="item" alt="" class="son-img" v-for="(item, index) in form.delayImage" :key="index" />
          </el-descriptions-item>
          <el-descriptions-item label="延期视频" span="3">
            <video :src="item" class="son-img" controls="controls" v-for="(item, index) in form.delayVideo" :key="index"></video>
          </el-descriptions-item>
        </el-descriptions>
        <div class="btn-list" v-if="changeReStatus(form.statusText) === '申请延期'">
          <el-button type="primary" size="small" @click="consentHandle">同意延期</el-button>
          <el-button size="small" @click="rejectHandle">驳回延期</el-button>
        </div>
      </div>
      <!-- 转单 -->
      <div class="info-content" v-if="form.status4 || form.status4 === 0">
        <el-divider></el-divider>
        <p class="info">转单信息</p>
        <el-descriptions>
          <el-descriptions-item label="转单原因">{{ form.id }}</el-descriptions-item>
          <el-descriptions-item label="被转单人" span="2">{{ form.person }}</el-descriptions-item>
          <el-descriptions-item label="转单图片" span="3">
            <img :src="item" alt="" class="son-img" v-for="(item, index) in form.transferImage" :key="index" />
          </el-descriptions-item>
          <el-descriptions-item label="转单视频" span="3">
            <video :src="item" class="son-img" controls="controls" v-for="(item, index) in form.transferVideo" :key="index"></video>
          </el-descriptions-item>
        </el-descriptions>
        <div class="btn-list" v-if="changeReStatus(form.statusText) === '申请转单'">
          <el-button type="primary" size="small" @click="consentTransferHandle">同意转单</el-button>
          <el-button size="small" @click="rejectTransferHandle">驳回转单</el-button>
        </div>
      </div>
      <!-- 退单 -->
      <div class="info-content" v-if="form.status2 || form.status2 === 0">
        <el-divider></el-divider>
        <p class="info">退单信息</p>
        <el-descriptions>
          <el-descriptions-item label="退单原因">{{ form.backRemark }}</el-descriptions-item>
          <el-descriptions-item label="退单图片" span="3">
            <img :src="item" alt="" class="son-img" v-for="(item, index) in form.backImage" :key="index" />
          </el-descriptions-item>
          <el-descriptions-item label="退单视频" span="3">
            <video :src="item" class="son-img" controls="controls" v-for="(item, index) in form.backVideo" :key="index"></video>
          </el-descriptions-item>
        </el-descriptions>
        <div class="btn-list" v-if="changeReStatus(form.statusText) === '申请退单'">
          <el-button type="primary" size="small" @click="consentBackHandle">同意退单</el-button>
          <el-button size="small" @click="rejectBackHandle">驳回退单</el-button>
        </div>
      </div>
      <!-- 处理 -->
      <div v-if="form.status === 1">
        <el-divider></el-divider>
        <p class="info">处理信息</p>
        <el-descriptions>
          <el-descriptions-item label="处理图片" span="3">
            <template>
              <img :src="item" alt="" class="son-img" v-for="(item, index) in form.handlerImageArr" :key="index" />
            </template>
          </el-descriptions-item>
          <el-descriptions-item label="处理视频" span="3">
            <video :src="item" class="son-img" controls="controls" v-for="(item, index) in form.handlerVideoArr" :key="index"></video>
          </el-descriptions-item>
          <el-descriptions-item label="处理备注" span="3">{{ form.handlerRemark }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>

    <DrawerFile v-if="drawer" :drawer.sync="drawer" :fileName="fileName" :src="fileUrl" />
  </div>
</template>

<script>
import { getReport, reportUpdateStatus } from "@/api/work/report";
import DrawerFile from '@/components/DrawerFile'
export default {
  name: 'UserQuery',
  components: { DrawerFile },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      form: {},
      drawer: false,
      fileName: '',
      fileUrl: ''
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    async getInfo() {
      const res = await getReport(this.$route.params.id)
      if (res.data.repairImg) {
        res.data.imgList = []
        let imgArr = res.data.repairImg.split(',')
        res.data.imgList = imgArr.map(item => {
          return this.baseUrl + item
        })
      }
      if (res.data.repairVideo) {
        res.data.fileList = []
        let fileArr = res.data.repairVideo.split(',')
        res.data.fileList = fileArr.map(item => {
          return this.baseUrl + item
        })
      }
      // 退单信息
      if (res.data.status2Json) {
        let obj = JSON.parse(res.data.status2Json)
        if (obj.remark) {
          res.data.backRemark = obj.remark
        }
        if (obj.img) {
          const imageArr = obj.img.split(',')
          res.data.backImage = imageArr.map(item => process.env.VUE_APP_BASE_API + item)
        }
        if (obj.video) {
          const videoArr = obj.video.split(',')
          res.data.backVideo = videoArr.map(item => process.env.VUE_APP_BASE_API + item)
        }
      }
      // 延期信息
      if (res.data.status3Json) {
        let obj = JSON.parse(res.data.status3Json)
        if (obj.remark) {
          res.data.delayRemark = obj.remark
        }
        if (obj.endDate) {
          res.data.delayEndDate = obj.endDate
        }
        if (obj.img) {
          const imageArr = obj.img.split(',')
          res.data.delayImage = imageArr.map(item => process.env.VUE_APP_BASE_API + item)
        }
        if (obj.video) {
          const videoArr = obj.video.split(',')
          res.data.delayVideo = videoArr.map(item => process.env.VUE_APP_BASE_API + item)
        }
      }
      // 转单信息
      if (res.data.status4Json) {
        let obj = JSON.parse(res.data.status4Json)
        if (obj.remark) {
          res.data.transferRemark = obj.remark
        }
        if (obj.repairPerson) {
          res.data.person = obj.repairPerson
        }
        if (obj.img) {
          const imageArr = obj.img.split(',')
          res.data.transferImage = imageArr.map(item => process.env.VUE_APP_BASE_API + item)
        }
        if (obj.video) {
          const videoArr = obj.video.split(',')
          res.data.transferVideo = videoArr.map(item => process.env.VUE_APP_BASE_API + item)
        }
      }
      // 处理信息
      if (res.data.statusJson) {
        let obj = JSON.parse(res.data.statusJson)
        if (obj.remark) {
          res.data.handlerRemark = obj.remark
        }
        if (obj.img) {
          const imageArr = obj.img.split(',')
          res.data.handlerImageArr = imageArr.map(item => process.env.VUE_APP_BASE_API + item)
        }
        if (obj.video) {
          const videoArr = obj.video.split(',')
          res.data.handlerVideoArr = videoArr.map(item => process.env.VUE_APP_BASE_API + item)
        }
      }
      this.form = res.data
      console.log(this.form)
    },
    /** 同意延期 */
    async consentHandle() {
      let params = {
        id: this.form.id,
        status3: 2,
        user: this.$store.state.user.user.userName,
        remark: JSON.parse(this.form.status3Json).remark,
        endDate: JSON.parse(this.form.status3Json).endDate,
        video: JSON.parse(this.form.status3Json).video,
        img: JSON.parse(this.form.status3Json).img,
      }
      const res = await reportUpdateStatus(params)
      if (res.code === 200) {
        this.$message.success('延期成功！')
        this.getInfo()
      } else {
        this.$message.error('延期失败！')
      }
    },
    /** 驳回延期 */
    async rejectHandle() {
      let params = {
        id: this.form.id,
        status3: 1,
        user: this.$store.state.user.user.userName,
        remark: JSON.parse(this.form.status3Json).remark,
        endDate: JSON.parse(this.form.status3Json).endDate,
        video: JSON.parse(this.form.status3Json).video,
        img: JSON.parse(this.form.status3Json).img,
      }
      const res = await reportUpdateStatus(params)
      if (res.code === 200) {
        this.$message.success('已驳回延期！')
        this.getInfo()
      } else {
        this.$message.error('驳回延期失败！')
      }
    },
    /** 同意转单 */
    async consentTransferHandle() {
      let params = {
        id: this.form.id,
        status4: 2,
        user: this.$store.state.user.user.userName,
        video: JSON.parse(this.form.status4Json).video,
        img: JSON.parse(this.form.status4Json).img,
        remark: JSON.parse(this.form.status4Json).remark,
        repairPerson: JSON.parse(this.form.status4Json).repairPerson,
        repairPersonPhone: JSON.parse(this.form.status4Json).repairPersonPhone,
      }
      const res = await reportUpdateStatus(params)
      if (res.code === 200) {
        this.$message.success('转单成功！')
        this.getInfo()
      } else {
        this.$message.error('转单失败！')
      }
    },
    /** 驳回转单 */
    async rejectTransferHandle() {
      let params = {
        id: this.form.id,
        status4: 1,
        user: this.$store.state.user.user.userName,
        video: JSON.parse(this.form.status4Json).video,
        img: JSON.parse(this.form.status4Json).img,
        remark: JSON.parse(this.form.status4Json).remark,
        repairPerson: JSON.parse(this.form.status4Json).repairPerson,
        repairPersonPhone: JSON.parse(this.form.status4Json).repairPersonPhone,
      }
      const res = await reportUpdateStatus(params)
      if (res.code === 200) {
        this.$message.success('已驳回转单！')
        this.getInfo()
      } else {
        this.$message.error('驳回转单失败！')
      }
    },
    /** 同意退单 */
    async consentBackHandle() {
      let params = {
        id: this.form.id,
        status2: 2,
        user: this.$store.state.user.user.userName,
        remark: JSON.parse(this.form.status2Json).remark,
        video: JSON.parse(this.form.status2Json).video,
        img: JSON.parse(this.form.status2Json).img
      }
      const res = await reportUpdateStatus(params)
      if (res.code === 200) {
        this.$message.success('退单成功！')
        this.getInfo()
      } else {
        this.$message.error('退单失败！')
      }
    },
    /** 驳回退单 */
    async rejectBackHandle() {
      let params = {
        id: this.form.id,
        status2: 1,
        user: this.$store.state.user.user.userName
      }
      const res = await reportUpdateStatus(params)
      if (res.code === 200) {
        this.$message.success('已驳回退单！')
        this.getInfo()
      } else {
        this.$message.error('驳回退单失败！')
      }
    },
    changeStatus(val) {
      let str = ''
      switch (val) {
        case 0:
          str = '待处理'; break;
        case 1:
          str = '已处理'; break;
        default: break;
      }
      return str
    },
    changeReStatus(val) {
      if (!val) return
      let arr = JSON.parse(val)
      let obj = arr[arr.length - 1]
      if (obj.statusType === 2) {
        if (obj.status === 0) {
          return '申请退单'
        }
        if (obj.status === 1) {
          return '拒绝退单'
        }
        if (obj.status === 2) {
          return '同意退单'
        }
      }
      if (obj.statusType === 3) {
        if (obj.status === 0) {
          return '申请延期'
        }
        if (obj.status === 1) {
          return '拒绝延期'
        }
        if (obj.status === 2) {
          return '同意延期'
        }
      }
      if (obj.statusType === 4) {
        if (obj.status === 0) {
          return '申请转单'
        }
        if (obj.status === 1) {
          return '拒绝转单'
        }
        if (obj.status === 2) {
          return '同意转单'
        }
      }
    },
    /** 展示附件 */
    getShowFile(row) {
      this.drawer = true
      this.fileName = this.getFileName(row)
      this.fileUrl = row
    }
  }
}
</script>

<style lang="scss" scoped>
  .info {
    margin-top: 0;
    font-weight: 600;
    border-left: 4px solid #3C7EFF;
    line-height: 1;
    padding-left: 4px;
  }
  .info-content {
    position: relative;
    .btn-list {
      position: absolute;
      right: 0;
      top: 30px;
    }
  }
  .app-content {
    background: #fff;
    width: 100%;
    height: 100%;
    padding: 30px;
    overflow-y: scroll;
    .son-img {
      width: 102px;
      height: 102px;
      margin-right: 20px;
    }
    .files {
      .file-content {
        width: 422px;
        height: 72px;
        background: #F8F8F8;
        display: flex;
        align-items: center;
        padding: 0 30px;
        margin: 0 20px 20px 0;
        cursor: pointer;
        img {
          width: 34px;
          height: 39px;
        }
        .file-name {
          margin: 0 20px;
          p {
            margin: 0;
          }
          span {
            font-size: 14px;
            color: #999999;
            line-height: 19px;
            text-align: left;
            font-style: normal;
          }
        }
      }
    }
    .son-content {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 30px;
      
    }
  }
</style>